<template>
  <view class="register-page">
    <nav-bar title="新用户注册" textAlign="center"></nav-bar>
    <view class="form-container">
      <view class="input-container">
        <input type="text" placeholder="请输入邮箱" placeholder-style="color:#999" v-model="formData.email">
      </view>
      <view class="input-container email">
        <input type="text" placeholder="请输入邮箱验证码" placeholder-style="color:#999" v-model="formData.captcha">
        <view class="btn" :class="{'btn-disable':captchaActive}" @click="handleCaptcha">
          <text>发送验证码</text>
        </view>
      </view>
      <view class="input-container">
        <input type="password" placeholder="请输入密码" placeholder-style="color:#999" v-model="formData.password">
      </view>

      <view class="input-container">
        <input type="password" placeholder="请再次输入密码" placeholder-style="color:#999" v-model="formData.confirmPwd">
      </view>


      <view class="submit">
        <view class="btn" @click="handleSubmit">
          <text>注册</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    register,
    captcha
  } from "@/api/account/account.js"

  let emailPattern = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
  export default {
    data() {
      return {
        formData: {
          "email": "", //邮箱地址
          "password": "", //密码
          "confirmPwd": "", //确认密码
          "captcha": "" //邮箱验证码
        },
        captchaActive: false

      };
    },
    methods: {
      async handleSubmit() {
        // 验证
        let email = this.formData.email;
        if (!emailPattern.test(email)) {
          uni.showToast({
            title: "请输入邮箱",
            icon: "none"
          })
        }
        if (!this.formData.password || !this.formData.confirmPwd) {
          uni.showToast({
            title: "请正确填写密码",
            icon: 'none'
          })
          return;
        }
        if (this.formData.password != this.formData.confirmPwd) {
          uni.showToast({
            title: "两次密码不一致",
            icon: 'none'
          })
          return;
        }
        if (!this.formData.captcha) {
          uni.showToast({
            title: "请正确填写验证码",
            icon: 'none'
          })
          return;
        }

        // 注册
        const {
          data: res
        } = await register(this.formData);
        if (res.success) {
          uni.setStorageSync("userObj", res.data.user)
          uni.reLaunch({
            url: '/pages/account/login'
          })
          uni.showToast({
            title: "注册成功",
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      },
      // 发送验证码
      async handleCaptcha() {
        if (this.captchaActive) {
          return;
        }
        let email = this.formData.email;
        if (!emailPattern.test(email)) {
          uni.showToast({
            title: "请输入邮箱",
            icon: "none"
          })
        }
        const {
          data: res
        } = await captcha(this.formData.email);
        console.log(res);
        if (res.success) {
          this.handleTimeOut();
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }

      },
      handleTimeOut() {
        this.captchaActive = true;
        setTimeout(() => (
          this.captchaActive = false
        ), 60000)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .register-page {
    width: 100%;
    height: 100vh;
    background-color: #fff;

    .form-container {
      padding: 8px 16px;

      .input-container {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #ccc;
        display: flex;
        align-items: center;
        margin-top: 16px;

        input {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          padding-right: 24px;
          padding-left: 8px;
          z-index: 0;
        }

      }

      .input-container:focus-within {
        border-color: #3FD3D1;
      }

      .email {
        display: flex;
        align-content: space-between;
        align-items: center;
        width: 100%;
        height: 40px;

        input {
          margin-right: 10px;
        }

        .btn {
          width: 98px;
          height: 32px;
          flex-shrink: 0;
          background-color: #3FD3D1;
          border-radius: 8px;
          text-align: center;
          line-height: 32px;
          font-size: 12px;
          color: #fff;
        }

        .btn-disable {
          background-color: #cccc;
          color: #9E9E9E;
        }
      }

      .prompt {
        width: 100%;
        display: flex;
        justify-content: space-between;
        color: #9E9E9E;
        font-size: 12px;
        padding: 16px 0;
      }

      .submit {
        padding-top: 24px;

        .btn {
          width: 100%;
          height: 48px;
          border-radius: 4px;
          opacity: 1;
          background: #3FD3D1;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
        }
      }


    }
  }
</style>
